<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="shortcut icon" href="images/blog.ico">
    <link rel="stylesheet" href="css/s-init.css">
    <link rel="stylesheet" href="css/left-com.css">
    <link rel="stylesheet" href="css/portfolio.css">
    <link rel="stylesheet" type="text/css" href="font/iconfont.css">
    <link rel="stylesheet" href="css/blog-prowidth.css">
    <title>Mrs-xiao</title>
</head>
<body>
    <div id="wrap" class="width100 clearfix">
        <!-- 左边导航栏区域 -->
        <div class="left-nav fl-left">
            <!-- 左边导航栏内容区域 -->
            <div class="left-nav-content">
                <h1 class="mar-bottom55 ">
                    <a href="index1.html">MARBLE</a>
                </h1>
                <ul>
                    <li class="pad-top10">
                        <a  href="index1.html">HOME</a>
                    </li>
                    <li>
                        <a href="blog.html">BLOG</a>
                    </li>
                    <li>
                        <a href="portfolio.html">PORTFOLIO</a>
                    </li>
                    <li>
                        <a href="about.html">ABOUT</a>
                    </li>
                    <li>
                        <a href="contact.html">CONTACT</a>
                    </li>
                </ul>
            </div>
            <!-- 左边导航脚步区域 -->
            <div class="left-nav-footer ">
                <p class="ft-size12 pad-bottom8">Copyright © 2017.Company name All rights reserved.</p>
                <ul>
                    <li>
                        <a href="">
                            <i class="iconfont icon-Facebook"></i>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <i class="iconfont icon-gezi"></i>
                        </a>
                    </li>
                    <li>
                        <a href="">
                             <i class=" iconfont icon-xiangji-copy"></i>    <i></i>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <i class="iconfont icon-in"></i>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 右边主要内容区 -->
        <div class="main-content fl-right">
            <!-- recent -->
            <div class="recent-blog pad-top10">
                <h3 class="mar-bottom55 ft-size16">PORTFOLIO</h3>
                <ul class="clearfix">
                    <li>
                        <a href="">
                            <img src="images/blog/img-1.jpg" alt="">
                        </a>
                        <!-- 透明盒子 -->
                        <div class="opacity ">
                            <h5 class="ft-size14 mar-top55 mar-bottom35">Project Name</h5>
                            <span class="ft-size12">Illustration</span>
                        </div>
                    </li>
                    <li>
                        <a href="">
                            <img src="images/blog/img-2.jpg" alt="">
                        </a>
                        <!-- 透明盒子 -->
                        <div class="opacity ">
                            <h5 class="ft-size14 mar-top55 mar-bottom35">Project Name</h5>
                            <span class="ft-size12">Illustration</span>
                        </div>
                    </li>
                    <li>
                        <a href="">
                            <img src="images/blog/img-3.jpg" alt="">
                        </a>
                        <!-- 透明盒子 -->
                        <div class="opacity ">
                            <h5 class="ft-size14 mar-top55 mar-bottom35">Project Name</h5>
                            <span class="ft-size12">Illustration</span>
                        </div>
                    </li>
                    <li>
                        <a href="">
                            <img src="images/blog/img-4.jpg" alt="">
                        </a>
                        <!-- 透明盒子 -->
                        <div class="opacity ">
                            <h5 class="ft-size14 mar-top55 mar-bottom35">Project Name</h5>
                            <span class="ft-size12">Illustration</span>
                        </div>
                    </li>
                    <li>
                        <a href="">
                            <img src="images/blog/img-5.jpg" alt="">
                        </a>
                        <!-- 透明盒子 -->
                        <div class="opacity ">
                            <h5 class="ft-size14 mar-top55 mar-bottom35">Project Name</h5>
                            <span class="ft-size12">Illustration</span>
                        </div>
                    </li>
                    <li>
                        <a href="">
                            <img src="images/blog/img-6.jpg" alt="">
                        </a>
                        <!-- 透明盒子 -->
                        <div class="opacity ">
                            <h5 class="ft-size14 mar-top55 mar-bottom35">Project Name</h5>
                            <span class="ft-size12">Illustration</span>
                        </div>
                    </li>
                    <li>
                        <a href="">
                            <img src="images/blog/img-1.jpg" alt="">
                        </a>
                        <!-- 透明盒子 -->
                        <div class="opacity ">
                            <h5 class="ft-size14 mar-top55 mar-bottom35">Project Name</h5>
                            <span class="ft-size12">Illustration</span>
                        </div>
                    </li>
                    <li>
                        <a href="">
                            <img src="images/blog/img-2.jpg" alt="">
                        </a>
                        <!-- 透明盒子 -->
                        <div class="opacity ">
                            <h5 class="ft-size14 mar-top55 mar-bottom35">Project Name</h5>
                            <span class="ft-size12">Illustration</span>
                        </div>
                    </li>
                     <li>
                        <a href="">
                            <img src="images/blog/img-3.jpg" alt="">
                        </a>
                        <!-- 透明盒子 -->
                        <div class="opacity ">
                            <h5 class="ft-size14 mar-top55 mar-bottom35">Project Name</h5>
                            <span class="ft-size12">Illustration</span>
                        </div>
                    </li>
                    <li>
                        <a href="">
                            <img src="images/blog/img-4.jpg" alt="">
                        </a>
                        <!-- 透明盒子 -->
                        <div class="opacity ">
                            <h5 class="ft-size14 mar-top55 mar-bottom35">Project Name</h5>
                            <span class="ft-size12">Illustration</span>
                        </div>
                    </li>
                    <li>
                        <a href="">
                            <img src="images/blog/img-5.jpg" alt="">
                        </a>
                        <!-- 透明盒子 -->
                        <div class="opacity ">
                            <h5 class="ft-size14 mar-top55 mar-bottom35">Project Name</h5>
                            <span class="ft-size12">Illustration</span>
                        </div>
                    </li>
                    <li>
                        <a href="">
                            <img src="images/blog/img-6.jpg" alt="">
                        </a>
                        <!-- 透明盒子 -->
                        <div class="opacity ">
                            <h5 class="ft-size14 mar-top55 mar-bottom35">Project Name</h5>
                            <span class="ft-size12">Illustration</span>
                        </div>
                    </li>
                </ul>
            </div>
            <!-- touch部分 -->
            <div class="touch">
                <h3 class="mar-bottom35">Get in touch</h3>
                <p class="ft-size18 mar-bottom35">Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
                <a class="ft-size18" href="">learn more</a>
            </div>
        </div>
    </div>
   
</body>
</html>